<template>
    <div id="map">

    </div>
</template>

<script>
import * as echarts from 'echarts';
import { mapChina, mapProvince } from "@/api/map.js"

export default ({
    data() {
        return {
            mapChart: null,
        }
    },

    created() {

    },

    mounted() {
        this.init()
    },

    methods: {
        //初始化实例
        init() {
            this.mapChart = echarts.init(document.querySelector("#map"))

            //全国地图请求
            mapChina().then(res => {
                const { data } = res

                //拿到中国的名称和36个省份
                const { properties, features } = data

                //注册全国地图
                echarts.registerMap(properties.name, data)
                this.draw(properties.name)

                //实现下转功能，点击省份时跳到对应的省份地图
                this.mapChart.on("click", event => {
                    const provinceCode = features[event.dataIndex].properties.code

                    //省份地图请求
                    mapProvince(provinceCode).then(({data}) => {
                        console.log(data);
                        const {properties,features} = data

                        
                        // 注册省份地图
                        echarts.registerMap(properties.name, data)
                        this.draw(properties.name)

                    })

                })
            })


        },

        //地图
        draw(mapName) {
            // 设置配置
            this.mapChart.setOption({
                series: {
                    name: '我改动了这个中国地图',
                    type: 'map',
                    // map值为registerMap()注册的地图名称
                    map: mapName,
                    roam: true,
                    //重置试图中心，实现点击省份时地图不会移动位置
                    center:undefined,
                    zoom: 1.2,
                    scaleLimit: {
                        min: 1,
                        max: 10
                    },
                    // 默认状态下的样式
                    label: {
                        show: true,
                        color: 'black'
                    },
                    itemStyle: {
                        areaColor: "orange"
                    },
                    // 高亮状态下
                    emphasis: {
                        label: {
                            show: true,
                            color: 'red'
                        },
                        itemStyle: {
                            areaColor: 'pink'
                        }
                    },
                    // 选中状态下
                    select: {
                        label: {
                            show: true,
                            color: 'pink'
                        },
                        itemStyle: {
                            areaColor: 'green'
                        }
                    }
                }
            })
        }
    }
})
</script>

<style lang="scss" scoped>
#map {
    width: 600px;
    height: 600px;
    margin: auto;
    border: 3px solid black;
}
</style>